<template>
  <div class="table_content">
    <div style="height:100%;width:224px;padding:20px 10px;">
      <div>
        <div style="height:40px;line-height:40px;font-weight:600">Processing</div>
        <div @click="clickHandler(item)"
             class="item cursor_pointer"
             :style="{backgroundColor:item === activeIndex?'#F0F0F0':'','font-weight':item === activeIndex?600:400,}"
             v-for="item in tabsList"
             :key="item">
          <div style="font-size: 14px;color: #404040;">{{item}}</div>
          <div :style="{backgroundColor:item === activeIndex?'#17B3A3':'#F0F0F0',color:item === activeIndex?'#fff':'#7F7F7F'}"
               style="padding:0 6px;height:14px;line-height:14px;text-align:center;border-radius:10px;font-size: 10px;">{{countHandler(item)}}</div>
        </div>
      </div>
      <div v-if="pageheaderActiveTabs === 'review'">
        <div style="height:40px;line-height:40px;font-weight:600">Review Result Log</div>
        <div @click="logClickHandler(item)"
             class="item cursor_pointer"
             :style="{backgroundColor:item === activeIndex?'#F0F0F0':'','font-weight':item === activeIndex?600:400,}"
             v-for="item in logList"
             :key="item">
          <div style="font-size: 14px;color: #404040;">{{item}}</div>
        </div>
      </div>
    </div>
    <div style="backgroundColor:;width:800px;flex:1;padding:20px;padding-top:5px;border-left:1px solid #F0F0F0">
      <div>
        <el-input placeholder="Search"
                  v-if="pageheaderActiveTabs === 'management'"
                  style="width:280px;margin-top:15px;float:right"
                  prefix-icon="el-icon-search"
                  clearable
                  @input="keyWordsChange"
                  v-model="keyWords">
        </el-input>
        <div v-loading="loading"
             :style="{'min-height':heightValue}">
          <el-table v-if="!loading"
                    :data="comDataList"
                    :height="heightValue"
                    style="width: 100%;">
            <el-table-column label="App Name"
                             width="180">
              <template slot-scope="scope">
                <el-button v-if="activeIndex==='Publish'||activeIndex==='Cancel'||activeIndex==='Update'"
                           @click="nameClick(scope.row)"
                           type="text">{{scope.row.name}}</el-button>
                <span v-else>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeIndex==='Issued'||activeIndex==='Refused'"
                             label="Type">
              <template slot-scope="scope">
                {{typeHander(scope.row.submitType)}}
              </template>
            </el-table-column>
            <el-table-column :prop="pageheaderActiveTabs === 'review'?'tenantName':'fromTenantName'"
                             label="Publisher"
                             width="180">
            </el-table-column>
            <el-table-column label="Application Time">
              <template slot-scope="scope">
                {{formatDate( scope.row.createTime,'MM/DD/YYYY HH:mm')}}
              </template>
            </el-table-column>
            <el-table-column v-if="activeIndex!=='Issued'&&activeIndex!=='Refused'"
                             align="center"
                             label="Action">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)"
                           :style="{color:actionValue==='OFF'?'#F56C6C':'','margin-right':'10px'}"
                           type="text">{{actionValue}}</el-button>
                <el-button v-if="activeIndex==='On Marketplace'"
                           @click="advance(scope.row)"
                           type="text">Advance</el-button>

                <el-button type="text"
                           style="color:#f56c6c"
                           @click="handleOpenMarketplace(scope.row)"
                           v-if="activeIndex==='Off Marketplace'">{{$t('delete')}}</el-button>
              </template>
            </el-table-column>
            <el-table-column v-if="activeIndex==='Issued'||activeIndex==='Refused'"
                             prop="updateByName"
                             label="Reviewer">
            </el-table-column>
            <el-table-column v-if="activeIndex==='Issued'||activeIndex==='Refused'"
                             prop="comments"
                             label="Comments">
            </el-table-column>
            <el-table-column v-if="activeIndex==='Issued'||activeIndex==='Refused'"
                             label="Review Time">
              <template slot-scope="scope">
                {{formatDate( scope.row.updateTime,'MM/DD/YYYY HH:mm')}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <infoDialog ref="infoDialog"
                @initdata="initdata"
                :title="title"
                :pageheaderActiveTabs="pageheaderActiveTabs"></infoDialog>
    <advanceDialog ref="advanceDialog"></advanceDialog>

    <DelAppDialog ref="del-app-dialog"
                  :params="selectedRow"
                  @successed="handleSuccessDelAppDialog" />
  </div>
</template>
<script>
import { GlobalTimeformat } from '@/utils/common'
import infoDialog from './infoDialog.vue'
import advanceDialog from './advanceDialog.vue'
import { debounce } from 'lodash'

import DelAppDialog from './del-app-dialog'
export default {
  components: { infoDialog, advanceDialog, DelAppDialog },
  props: {
    tabsList: {
      type: Array,
      default: function () {
        return []
      }
    },
    pageheaderActiveTabs: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      keyWords: '',
      keyWordsValue: '',
      title: 'Review',
      activeIndex: 'Publish',
      appList: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      loading: false,
      logList: [
        'Issued',
        'Refused'
      ],
      listCount: {},
      advanceDialogVisible: false,

      selectedRow: {}
    }
  },
  computed: {
    heightValue () {
      var vh = document.body.clientHeight
      if (this.pageheaderActiveTabs === 'management') {
        return (vh - 300) + 'px'
      } else {
        return (vh - 250) + 'px'
      }
    },
    comDataList () {
      var retdata = []
      retdata = this.appList
      // retdata = retdata.filter(item => {
      //   if (this.keyWordsValue) {
      //     if (item.description) {
      //       return item.name.toLowerCase().includes(this.keyWordsValue.toLowerCase()) || item.description.toLowerCase().includes(this.keyWordsValue.toLowerCase())
      //     } else {
      //       return item.name.toLowerCase().includes(this.keyWordsValue.toLowerCase())
      //     }
      //   } else {
      //     return item
      //   }
      // })
      return retdata
    },
    actionValue () {
      var temp
      switch (this.activeIndex) {
        case 'Publish':
        case 'Cancel':
        case 'Update':
          temp = 'Review'
          break
        case 'On Marketplace':
          temp = 'OFF'
          break
        case 'Off Marketplace':
        case 'No Status':
          temp = 'ON'
          break
        default:
          temp = null
          break
      }
      return temp
    }
  },
  created () {
    this.initdata()
  },

  methods: {
    /* ================ MB-14928 START ================ */
    handleOpenMarketplace (row) {
      this.selectedRow = row

      this.$nextTick(() => {
        this.$refs['del-app-dialog'].visible = true
      })
    },
    handleSuccessDelAppDialog () {
      this.initdata()
    },
    /* ================ MB-14928 END ================ */

    advance (row) {
      this.$refs.advanceDialog.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.advanceDialog.init(row.id)
      })
    },
    keyWordsChange: debounce(function (val) {
      this.keyWordsValue = val
      this.getAppManagementList()
      if (this.$refs.cardList) if (this.$refs.cardList) this.$refs.cardList.scrollTop()
    }, 1000),
    typeHander (type) {
      var temp
      switch (type) {
        case 1:
          temp = 'Publish'
          break
        case 2:
          temp = 'Update'
          break
        case 3:
          temp = 'Cancel'
          break
        default:
          break
      }
      return temp
    },
    getListCount () {
      this.$interface.reports.getListCountApi()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.listCount = res.data
        }).catch(() => { })
    },
    countHandler (item) {
      var temp
      switch (item) {
        case 'Publish':
          temp = this.listCount.publish
          break
        case 'Cancel':
          temp = this.listCount.cancel
          break
        case 'Update':
          temp = this.listCount.update
          break
        case 'On Marketplace':
          temp = this.listCount.on
          break
        case 'Off Marketplace':
          temp = this.listCount.off
          break
        case 'No Status':
          temp = this.listCount.no
          break
        default:
          break
      }
      return temp
    },
    formatDate (time, str) {
      return GlobalTimeformat(time, 'HH:mm')
    },
    initdata () {
      this.keyWords = ''
      this.getListCount()
      this.$nextTick(() => {
        // if (this.pageheaderActiveTabs === 'review') {
        //   this.getAppReviewList()
        // } else {
        //   this.getAppManagementList()
        // }
        switch (this.activeIndex) {
          case 'Publish':
          case 'Cancel':
          case 'Update':
            this.getAppReviewList()
            break
          case 'On Marketplace':
          case 'Off Marketplace':
          case 'No Status':
            this.getAppManagementList()
            break
          case 'Issued':
          case 'Refused':
            this.getAppLogList()
            break
          default:
            break
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.currentPage = 1
      this.initdata()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.initdata()
    },
    getAppReviewList () {
      let _self = this
      _self.loading = true
      var params = {
        current: this.currentPage,
        size: this.pageSize
      }
      if (this.activeIndex === 'Publish') {
        params.submitType = 1
      } else if (this.activeIndex === 'Cancel') {
        params.submitType = 3
      } else if (this.activeIndex === 'Update') {
        params.submitType = 2
      }
      _self.$interface.reports.getAppReviewListApi(params)
        .then(({ data: res }) => {
          _self.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.total = res.data.total
          this.appList = res.data.records
        })
        .catch(() => { })
    },
    getAppManagementList () {
      let _self = this
      _self.loading = true
      var params = {
        current: this.currentPage,
        size: this.pageSize,
        name: this.keyWords
      }
      if (this.activeIndex === 'On Marketplace') {
        params.online = true
      } else if (this.activeIndex === 'Off Marketplace') {
        params.online = false
      } else if (this.activeIndex === 'No Status') {
        params.online = 0
      }
      _self.$interface.reports.getAppManagementListApi(params)
        .then(({ data: res }) => {
          _self.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.total = res.data.total
          this.appList = res.data.records
        })
        .catch(() => { })
    },
    getAppLogList () {
      let _self = this
      _self.loading = true
      var params = {
        result: this.activeIndex === 'Issued',
        current: this.currentPage,
        size: this.pageSize
      }
      _self.$interface.reports.getAppLogListApi(params)
        .then(({ data: res }) => {
          _self.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.total = res.data.total
          this.appList = []
          this.$nextTick(() => { this.appList = res.data.records })
        })
        .catch(() => { })
    },
    clickHandler (index) {
      this.activeIndex = index
      this.initdata()
    },
    logClickHandler (index) {
      this.activeIndex = index
      this.getAppLogList()
    },
    handleClick (row) {
      this.$refs.infoDialog.visible = true
      this.$nextTick(() => {
        if (this.pageheaderActiveTabs === 'review') {
          this.title = 'Review'
          this.$refs.infoDialog.init(row.tenantAppId, row.id)
        } else if (this.pageheaderActiveTabs === 'management') {
          if (this.activeIndex === 'On Marketplace') {
            this.title = 'On Marketplace'
          } else if (this.activeIndex === 'Off Marketplace') {
            this.title = 'Off Marketplace'
          } else if (this.activeIndex === 'No Status') {
            this.title = 'No Status'
          }
          this.$refs.infoDialog.init(row.id)
        }
      })
    },
    nameClick (item) {
      if (item.appResourceList[0].resourceType === 1) {
        this.$router.push({ path: `/dashboard-${item.appResourceList[0].resourceId}`, query: { pageid: item.appResourceList[0].resourceId, name: item.appResourceList[0].resourceName, appResourceList: JSON.stringify(item.appResourceList) } })
      } else if (item.appResourceList[0].resourceType === 2) {
        this.$router.push({ path: `bot-${item.appResourceList[0].resourceId}`, query: { pageid: 'botdetail', name: item.appResourceList[0].resourceName, botId: item.appResourceList[0].resourceId, appResourceList: JSON.stringify(item.appResourceList) } })
      } else if (item.resourceType === 3) {
        if (item.resourcePath.includes('http')) {
          window.open(item.resourcePath, '_blank')
        } else {
          this.$router.replace(item.resourcePath)
        }
      }
    },
    handleCl (val) {
    }
  }
}
</script>
<style scoped lang='scss'>

.cursor_pointer {
  cursor: pointer;
}
.table_height_low {
  min-height: calc(100vh - 300px);
}
.table_height {
  min-height: calc(100vh - 250px);
}
.table_content {
  min-height: calc(100vh - 180px);
  display: flex;
  & > div {
    min-height: calc(100vh - 180px);
  }
  .item {
    // background-color: #ccc;
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
  }
}
</style>
